<style scoped lang="less">
@import "./home.less";
</style>
<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="8">
                <div class="my-tag">
                    <div class="my-tag-div" style="background-color:#7fffd4">
                        <i class="el-icon-user" style="font-size:60px"></i>
                    </div>
                    <div class="my-tag-div-font" >
                        <p style="color:#7fffd4">{{count.create_user}}</p>
                        <span>今日新增用户</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="my-tag">
                    <div class="my-tag-div" style="background-color:rgb(255, 213, 114)">
                        <i class="el-icon-sugar" style="font-size:60px"></i>
                    </div>
                    <div class="my-tag-div-font" >
                        <p style="color:rgb(255, 213, 114)">{{count.award_count}}</p>
                        <span>今日中奖人数</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="my-tag">
                    <div class="my-tag-div" style="background-color:#00ffff">
                        <i class="el-icon-dessert" style="font-size:60px"></i>
                    </div>
                    <div class="my-tag-div-font" >
                        <p style="color:rgb(255, 213, 114)">{{count.draw_award}}</p>
                        <span>今日领奖人数</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="12" style="margin-top:10px">
            <el-col :span="24">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>
                            <i class="el-icon-food"></i>
                            参与人数、中奖人数、兑奖人数
                        </span>
                    </div>
                    <div id="myChart1" :style="{width: '80%', height: '500px'}"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from "@/axios";
import echarts from 'echarts';

import { checkHttp } from "@/assets/js/common";
export default {
    data () {
        return {
            count: {
                create_user: 0,
                award_count:0,
                draw_award: 0,
            },
            adminData: {},
        };
    },
    mounted() {
        // 未登录跳转登录页面
        if (localStorage._token == "" || localStorage._token == undefined) {
            this.$router.push({name: "login"});
            return false;
        }

        this.todayStatistics();

        this.peopleStatistics();
    },
    methods: {
        //今日统计
        todayStatistics() {
            let vm = this;
            axios
            .post("/admin/todayStatistic", {})
            .then(response => {
            let data = response.data;
            if (data.code == 200) {
                let result = data.data;
                vm.count=result.count;
            } else {
                vm.$message.info(data.message);
            }
            })
            .catch(error => {
            // vm.$Message.info("网络或服务器异常");
            });
        },
        // 饼状图
        drawLine(legend,data,id){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById(id));
            // 绘制图表
            myChart.setOption({
                //title: { text: '用户数量统计' },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: legend
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        // 参与人数
        peopleStatistics() {
            let vm = this;
            axios
            .post("/admin/peopleStatistics", {})
            .then(response => {
                let data = response.data;
                if (data.code == 200) {
                    let result = data.data;
                    this.drawLine(result.name,result.arr,'myChart1');
                } else {
                    vm.$message.info(data.message);
                }
            })
            .catch(error => {
            // vm.$Message.info("网络或服务器异常");
            });
        },
    }

};
</script>

